<div class="row" style="margin-top: 1%">
    <div class="box box-info container" style="padding-top: 1%;padding-bottom: 1%;">
        <div class="box-header with-border col-xs-12">
            <h3 class="boxtitle">添加用户</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <div class="col-xs-12">
            <form class="form-horizontal">
                <div class="box-body">
                    <div class="form-group">
                        <label for="usernameId" class="col-sm-4 col-xs-4 control-label">用户名</label>
                        <div class="col-sm-8 col-xs-8">
                            <input type="text" class="form-control" id="usernameId" style="width: 50%">
                        </div>
                    </div>
                    <div class="form-group" id="pwdDiv">
                        <label for="passwordId" class="col-sm-4 col-xs-4 control-label">密码</label>

                        <div class="col-sm-8 col-xs-8">
                            <input type="password" class="form-control"  id="passwordId" style="width: 50%">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="roleId" class="col-sm-4 col-xs-4 control-label">角色</label>
                        <div class="col-sm-8 col-xs-8">
                            <input type="text" class="form-control load-sys-role" readonly="readonly" id="roleId" placeholder="角色" style="width: 50%">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="centerId" class="col-sm-4 col-xs-4 control-label">中心</label>
                        <div class="col-sm-8 col-xs-8">
                            <input type="text" class="form-control load-sys-center" readonly="readonly" id="centerId" placeholder="中心" style="width: 50%">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="classId" class="col-sm-4 col-xs-4 control-label">班级</label>
                        <div class="col-sm-8 col-xs-8">
                            <input type="text" class="form-control load-sys-class" readonly="readonly" id="classId" placeholder="班级" style="width: 50%">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="emailId" class="col-sm-4 col-xs-4 control-label">邮箱</label>
                        <div class="col-sm-8 col-xs-8">
                            <input type="text" class="form-control"  id="emailId" style="width: 50%">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phoneId" class="col-sm-4 col-xs-4 control-label">手机号</label>
                        <div class="col-sm-8 col-xs-8">
                            <input type="text" class="form-control"  id="phoneId" style="width: 50%">
                        </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer" style="text-align: center;display: flex;justify-content: center;align-items:center;">
                        <button type="button" class="btn btn-default btn-cancel button button--aylen button--border-thin button--round-s">取消</button>
                        <button type="button" class="btn btn-info btn-save button button--aylen button--border-thin button--round-s">保存</button>
                    </div>
                    <!-- /.box-footer -->
                </div>
            </form>
        </div>

        <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="treeLayer" type="page" times="2" showtime="0" contype="object"
             style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
            <div class="layui-layer-title" style="cursor: move;">角色</div>
            <div class="layui-layer-content" style="height: 358px;">
                <div style="padding: 10px;" class="layui-layer-wrap">
                    <ul id="zTreeId" class="ztree"></ul>    <!-- 动态加载树 -->
                </div>
            </div>
            <span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
            <div class="layui-layer-btn layui-layer-btn-">
                <a class="layui-layer-btn0 btn-confirm">确定</a>
                <a class="layui-layer-btn1 btn-cancel">取消</a>
            </div>
        </div>
        <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="treeLayerClass" type="page" times="2" showtime="0" contype="object"
             style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
            <div class="layui-layer-title" style="cursor: move;">班级</div>
            <div class="layui-layer-content" style="height: 358px;">
                <div style="padding: 10px;" class="layui-layer-wrap">
                    <ul id="zTreeClassId" class="ztree"></ul>    <!-- 动态加载树 -->
                </div>
            </div>
            <span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel-class" ></a></span>
            <div class="layui-layer-btn layui-layer-btn-">
                <a class="layui-layer-btn0 btn-confirm-class">确定</a>
                <a class="layui-layer-btn1 btn-cancel-class">取消</a>
            </div>
        </div>
        <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="treeLayerCenter" type="page" times="2" showtime="0" contype="object"
             style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
            <div class="layui-layer-title" style="cursor: move;">中心</div>
            <div class="layui-layer-content" style="height: 358px;">
                <div style="padding: 10px;" class="layui-layer-wrap">
                    <ul id="zTreeCenterId" class="ztree"></ul>    <!-- 动态加载树 -->
                </div>
            </div>
            <span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel-center" ></a></span>
            <div class="layui-layer-btn layui-layer-btn-">
                <a class="layui-layer-btn0 btn-confirm-center">确定</a>
                <a class="layui-layer-btn1 btn-cancel-center">取消</a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="static/bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="static/bower_components/layer/layer.js"></script>
<script type="text/javascript">
    var zTree;
    var zTreeCenter;
    var zTreeClass;
    //初始化zTree时会用到
    var setting = {
        data : {
            simpleData : {
                enable : true
                //idKey : "roleId",  //节点数据中保存唯一标识的属性名称
               // pIdKey : null,  //节点数据中保存其父节点唯一标识的属性名称
               // rootPId : null  //根节点id
            }//json 格式javascript对象
        }
    }//json 格式的javascript对象
    $(document).ready(function(){
        //页面加载完成以后加载角色信息并初始化页面
        // doLoadRoles();
        doInitFormData();
        //事件注册
        $(".box-footer")
            .on("click",".btn-cancel",doCancel)
            .on("click",".btn-save",doSaveOrUpdate);

        $("#treeLayer")
            .on("click",".btn-cancel",doHideTree)
            .on("click",".btn-confirm",doConfirm);
        $("#treeLayerCenter")
            .on("click",".btn-cancel-center",doHideTreeCenter)
            .on("click",".btn-confirm-center",doConfirmCenter);
        $("#treeLayerClass")
            .on("click",".btn-cancel-class",doHideTreeClass)
            .on("click",".btn-confirm-class",doConfirmClass);

        $(".form-horizontal")
            .on("click",".load-sys-role",doLoadZTreeNodes)
            .on("click",".load-sys-center",doLoadCenterZTreeNodes)
            .on("click",".load-sys-class",doLoadClassZTreeNodes);
    });

    function doHideTree(){
        $("#treeLayer").css("display","none");
    }
    function doHideTreeClass(){
        $("#treeLayerClass").css("display","none");
    }
    function doHideTreeCenter(){
        $("#treeLayerCenter").css("display","none");
    }
    //确定按钮
    function doConfirm(){
        //1.获取选中的记录(id,name);
        var selectedNodes=zTree.getSelectedNodes();
        console.log(selectedNodes);
        var node=selectedNodes[0];
        //2.将id和name填写或绑定在具体对象上
        $("#roleId").val(node.name);
        console.log("node.roleId="+node.roleId)
        $("#roleId").data("roleId",node.roleId)
        //3.隐藏zTree对应的Div
        doHideTree();
    }
    //确定按钮
    function doConfirmCenter(){
        //1.获取选中的记录(id,name);
        var selectedNodes=zTreeCenter.getSelectedNodes();
        console.log(selectedNodes);
        var node=selectedNodes[0];
        console.log(node);
        //2.将id和name填写或绑定在具体对象上
        $("#centerId").val(node.name);
        console.log("node.centerId="+node.centerId)
        $("#centerId").data("centerId",node.centerId)
        //3.隐藏zTree对应的Div
        doHideTreeCenter();
    }
    //确定按钮
    function doConfirmClass(){
        //1.获取选中的记录(id,name);
        var selectedNodes=zTreeClass.getSelectedNodes();
        console.log(selectedNodes);
        var node=selectedNodes[0];
        //2.将id和name填写或绑定在具体对象上
        $("#classId").val(node.name);
        console.log("node.classId="+node.classId)
        $("#classId").data("classId",node.classId)
        //3.隐藏zTree对应的Div
        doHideTreeClass();
    }

    function doLoadZTreeNodes(){
        var url="/cy/role/doFindZTreeNodes";
        $("#treeLayer").css("display","block");
        $.getJSON(url,function(result){
            if(result.state==1){
                // zTreeId.destroy();
                console.log(result);
                zTree = $.fn.zTree.init($("#zTreeId"),setting,result.data);
            }else{
                alert(result.message);
            }
        });
    }
    function doLoadCenterZTreeNodes(){
        var url="/cy/center/doFindZTreeNodes";
        $("#treeLayerCenter").css("display","block");
        $.getJSON(url,function(result){
            if(result.state==1){
                // zTree.destroy()
                console.log(result);
                zTreeCenter = $.fn.zTree.init($("#zTreeCenterId"),setting,result.data);
            }else{
                alert(result.message);
            }
        });
    }
    function doLoadClassZTreeNodes(){
        var url="/cy/classes/doFindZTreeNodes";
        $("#treeLayerClass").css("display","block");
        $.getJSON(url,function(result){
            if(result.state==1){
                // zTree.destroy()
                console.log(result);
                zTreeClass = $.fn.zTree.init($("#zTreeClassId"),setting,result.data);
            }else{
                alert(result.message);
            }
        });
    }
    function doCancel(){
        $("#mainContentId").removeData("rowData");
        $("#mainContentId").load("user/user_list");
    }
    function doSaveOrUpdate(){
        var rowData=$("#mainContentId").data("rowData");
        //1.获取表单数据
        var params=doGetEditFormData();
        if(rowData)params.userId=rowData.userId;
        //2.发起异步请求
        var insertUrl="/cy/user/doInsertObject";
        var updateUrl="/cy/user/doUpdateObject";
        var url=rowData?updateUrl:insertUrl;
        console.log(params);
        $.post(url,params,function(result){

            if(result.state==1){
                alert(result.message);
                doCancel();
            }else{
                alert(result.message);
            }
        })
    }
    function doGetEditFormData(){
        //获取用户输入的数据
        var params={
            userName:$("#usernameId").val(),
            password:$("#passwordId").val(),
            email:$("#emailId").val(),
            mobile:$("#phoneId").val(),
            roleId:$("#roleId").data("roleId"),
            centerId:$("#centerId").data("centerId"),
            classId:$("#classId").data("classId")
        }
        //获取选择的角色
        // $("#rolesId input[name='roleId']")
        //     .each(function(){
        //         if($(this).prop("checked")){
        //             roleIds.push($(this).val());
        //         }
        //     });
        // params.roleIds=roleIds.toString();
        return params;
    }
    // function doLoadRoles(){
    //     var url="role/doFindRoles"
    //     $.getJSON(url,function(result){
    //         if(result.state==1){
    //             doInitPageRoles(result.data);
    //             doInitFormData();//修改时
    //         }else{
    //             alert(result.message);
    //         }
    //     })
    // }
    function doInitFormData(){
        var data=$("#mainContentId").data("rowData");
        if(!data)return;
        $("#pwdDiv").remove();
        console.log(data);
        //初始化用户信息
        $("#usernameId").val(data.userName);
        $("#roleId").val(data.roleName);
        $("#roleId").data("roleId",data.roleId);
        $("#emailId").val(data.email);
        $("#phoneId").val(data.mobile);
        //初始化用户角色信息
        // var ids=data.roleIds;
        // for(var i in ids){
        //     $("#rolesId input[value='"+ids[i]+"']")
        //         .prop("checked",true);
        // }
    }
    // function doInitPageRoles(data){
    //     //1.获取角色要显示的位置对象
    //     var div=$("#rolesId");
    //     div.empty();
    //     //2.迭代数据，将数据追加到div
    //     var input="<input type='checkbox' name='roleId' value='[id]'>[name]"
    //     for(var i in data){
    //         //记住每次replace时都会产生一个新的字符串对象
    //         var newInput=
    //             input.replace("[id]",data[i].id)
    //                 .replace("[name]",data[i].name);
    //         div.append(newInput)
    //     }
    // }
</script>
    
    
    
    
    
    
    